<template>
  <div id="tabBar" class="tabbar_bottom no_select">
    <template v-for="(menu,index) in doneMenus">
      <router-link
        v-if="menu.is_open"
        :key="index"
        :to="menu.path"
        class="bar_a"
        :style="'width:'+100/menus.length+'%'"
        :id="menu.path"
      >
        <span :class="['nav_icon',menu.icon]"></span>
        <span class="nav_name">{{menu.name}}</span>
      </router-link>
      <a
        v-else
        :key="index"
        @click="switchTab(index)"
        class="bar_a"
        :style="'width:'+100/menus.length+'%'"
        :id="menu.path"
      >
        <span :class="['nav_icon',menu.icon]"></span>
        <span class="nav_name">{{menu.name}}</span>
      </a>
    </template>
  </div>
</template>

<script>
export default {
  name: "tabbarCom",
  components: {},
  props: {},
  data() {
    return {
      userInfo: {},
      currIndex: 0,
      menus: [
        {
          index: 0,
          path: "buyKeyIndex",
          name: "",
          icon: "card_icon",
          active_icon: "card_icon_active",
          is_open: true,
          handler: () => {}
        },
        {
          index: 1,
          path: "sixSkills",
          name: "翻牌牌",
          icon: "card_icon",
          active_icon: "card_icon_active",
          is_open: true,
          handler: () => {
            // alphaHub.showToast({msg:"近期开放，敬请期待..."})
          }
        },
        {
          index: 2,
          path: "wallet",
          name: "小金库",
          icon: "wallet_icon",
          active_icon: "wallet_icon_active",
          is_open: true,
          handler: () => {
            // alphaHub.showToast({msg:"近期开放，敬请期待..."});
          }
        },
        {
          index: 3,
          path: "mine",
          name: "我的",
          icon: "mine_icon",
          active_icon: "mine_active_icon",
          is_open: true,
          handler: () => {
            // alphaHub.showToast({msg:"近期开放，敬请期待..."});
          }
        }
      ]
    };
  },
  watch: {},
  computed: {
    /**
     * 若是触发了退还本金的用户，只显示 [钱包，我的]: [3,4]
     */
    activeMenu: function() {
      let activeMenuIndexsAfterApply = [3, 4];
      let isApplyForWithdraw = this.userInfo.is_apply_back || false;
      let menus = this.menus.filter(item => {
        if (isApplyForWithdraw) {
          return activeMenuIndexsAfterApply.includes(item.index);
        } else {
          return item;
        }
      });
      return menus;
    },
    doneMenus() {
      const gender = this.$store.getters["user/userGender"];
      return this.menus;
    }
  },
  methods: {
    switchTab: function(index) {
      if (!this.isLogin()) {
        this.$router.push({ name: "login" });
        return;
      }
      let menuItem = this.menus[index];
      this.currIndex = index;
      if (menuItem.is_open) {
        this.$router.push({ name: menuItem.path });
      } else {
        // 未开放or不走本地路由（跳转第三方H5类型）
        menuItem.handler();
      }
    }
  },
  mounted() {
    alphaHub.$on("update_DT", data => {
      this.userInfo = data.user;
    });
    this.userInfo = this.DT.getUser;
  }
};
</script>
<style lang="scss" scoped>
$icon_w: 48px;
$icon_h: 46px;
$text_size: 44px;
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
  .tabbar_bottom {
    padding-bottom: constant(safe-area-inset-bottom);
  }
}
.tabbar_bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background: white;
  z-index: 50;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;
  border-top: solid 2px #f5f5f5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .bar_a {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-decoration: none;
    height: 100%;
    font-size: 26px;
    text-align: center;
    opacity: 0.5;
    span {
      display: block;
    }
    .nav_icon {
      height: $icon_h;
      width: $icon_w;
      background-size: 100%;
    }
    .nav_name {
      height: $text_size;
      line-height: $text_size;
      // color: #666;
    }
  }
  .active {
    color: #333333;
  }
  .router-link-active {
    opacity: 1 !important;
  }
  .router-link-active .nav_name {
    color: #333333;
  }
  .male_icon {
    background: url("/game/static/images/tabbar/male_active.png") no-repeat 100%;
  }
  .female_icon {
    background: url("/game/static/images/tabbar/female_active.png") no-repeat
      100%;
  }
  .card_icon {
    background: url("/game/static/images/tabbar/card_active.png") no-repeat 100%;
  }
  .wallet_icon {
    background: url("/game/static/images/tabbar/wallet_active.png") no-repeat
      100%;
  }
  .mine_icon {
    background: url("/game/static/images/tabbar/mine_active.png") no-repeat 100%;
  }
  .router-link-active .nav_icon.card_icon_active {
    background-image: url("/game/static/images/tabbar/card_active.png");
  }
  .router-link-active .nav_icon.wallet_icon {
    background-image: url("/game/static/images/tabbar/wallet_active.png");
  }
  .router-link-active .nav_icon.mine_active_icon {
    background-image: url("/game/static/images/tabbar/mine_active.png");
  }
  .goldfiled_icon {
    height: 44px;
    width: 51px;
  }
  .wallet_icon {
    height: 40px;
    width: 44px;
  }
  .personal_icon {
    height: 38px;
    width: 36px;
  }
}
</style>
